<script setup lang="ts">
import { nextTick, ref, watch } from 'vue'
const Transform = ref('scaleX(-1)')
const snapShot = ref(0)
const Record = ref(false)
var buffer
var mediaRecorder
nextTick(async () => {
    const video = document.getElementById('player') as HTMLVideoElement
    const canvas = document.getElementById('picture') as HTMLCanvasElement

    const stream = await navigator.mediaDevices.getUserMedia({
        video: {
            width: { min: 1280, ideal: 1920, max: 4096 },
            height: { min: 720, ideal: 1080, max: 4096 },
            frameRate: { min: 15, ideal: 30, max: 60 },
            facingMode: 'environment'
        },
        audio: false
    })
    const videoTracks = stream.getVideoTracks()
    console.log(`Using video device: ${videoTracks[0].label}`)
    video.style.transform = 'scaleX(-1)'
    video.srcObject = stream
    navigator.mediaDevices.enumerateDevices().then((devices) => {
        console.log('Available devices:', devices)
    })
    watch(
        Transform,
        (value) => {
            video.style.transform = value
            canvas.style.transform = value
        },
        { immediate: true }
    )
    watch(snapShot, () => {
        const context = canvas.getContext('2d')
        context?.drawImage(video, 0, 0, canvas.width, canvas.height)
    })

    watch(Record, (value, oldValue) => {
        if (oldValue === false && value === true) {
            buffer = []
            var options = {
                mimeType: 'video/webm;codecs=vp8'
            }
            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                console.error(`${options.mimeType} is not supported`)
                return
            }
            mediaRecorder = new MediaRecorder(stream, options)
            mediaRecorder.ondataavailable = (e) => {
                if (e && e.data && e.data.size > 0) buffer.push(e.data)
            }
            mediaRecorder.start(10)
            console.log('start record')
        } else if (oldValue === true && value === false) {
            mediaRecorder.stop()
        }
    })
})
const Play = () => {
    var blob = new Blob(buffer, { type: 'video/webm' })
    const url = URL.createObjectURL(blob)
    const record = document.getElementById('record') as HTMLVideoElement
    record.src = url
    record.controls = true
    record.autoplay = true
    record.muted = true
    record.play()
}
const Download = () => {
    var blob = new Blob(buffer, { type: 'video/webm' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'video.webm'
    a.click()
}
</script>

<template>
    <video id="player" autoplay playsinline></video>
    <a-button type="primary" @click="Transform = Transform === 'scaleX(-1)' ? 'none' : 'scaleX(-1)'"
        >翻转</a-button
    >
    <a-button type="primary" @click="snapShot++">SnapShot</a-button>
    <a-button type="primary" @click="Record = !Record">{{ Record ? 'Stop Record' : 'Start Record' }}</a-button>
    <a-button type="primary" @click="Play">Play</a-button>
    <canvas id="picture"></canvas>
    <video id="record"></video>
</template>

<style>
.none {
    -webkit-filter: none;
}
.blur {
    -webkit-filter: blur(.1875rem);
}
.grayscale {
    -webkit-filter: grayscale(1);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
}
.invert {
    -webkit-filter: invert(1);
}
.opacity {
    -webkit-filter: opacity(0.5);
}
.saturate {
    -webkit-filter: saturate(2);
}
.sepia {
    -webkit-filter: sepia(1);
}
.drop-shadow {
    -webkit-filter: drop-shadow(1rem 1rem 1.25rem blue);
}
.backdrop-filter {
    -webkit-backdrop-filter: blur(.1875rem);
}
</style>
